<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-22 02:02:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div class="grade">
    <h2>
      班级管理
    </h2>
    <div class="grade-content">
      <div style="padding:24px">
        <div>
          <a-button type="primary" @click="showModal">
            添加班级
          </a-button>
          <a-modal v-model="visible" title="添加班级" @ok="handleOk">
            <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
              <a-form-item label="班级名">
                <a-input placeholder="班级名" v-model="className" @change="inputChange" />
              </a-form-item>
              <a-form-item label="教室号">
                <a-select placeholder="请选择教室号" @change="handleSelectChange" v-model="SelectChange">
                  <a-select-option :value="item.room_id" v-for="(item) in allRoom" :key="item.id">
                    {{item.room_text}}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="课程名">
                <a-select placeholder="请选择课程" @change="handleSelectChange2" v-model="SelectChange2">
                  <a-select-option :value="item.subject_id" v-for="(item,index) in allClass" :key="index">
                    {{item.subject_text}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-form>
          </a-modal>
          <div class="grade-table">
            <el-table :data="examlist" style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
              <el-table-column prop="grade_name" label=班级名 width="180">
              </el-table-column>
              <el-table-column prop="subject_text" label="课程名" width="180">
              </el-table-column>
              <el-table-column prop="room_text" label="教室号">
              </el-table-column>
              <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                  <el-button @click="changeMsg(scope.row)" type="text" size="small">修改</el-button>
                  <el-button @click="delMsg(scope.row)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState, mapMutations } from 'vuex'
import { getClassRoom } from '../../api/ClassManage/Room'
import { addClass, getAllclass, delClass, changeClass } from '../../api/ClassManage/Grade'
export default {
  data () {
    return {
      tableData: [{
        grade_id: 'ef5vzf-mk31ka-3ltqao-3ikaf7',
        grade_name: '1610A',
        room_id: 'ddlo2b-qqts69-2pq07w-hiua58',
        room_text: '34313',
        subject_id: 'fyu3ln-azjkie',
        subject_text: '渐进式开发(react)'
      }],
      visible: false,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
      allRoom: [],
      allClass: [],
      SelectChange: '',
      SelectChange2: '',
      className: '',
      change: false
    }
  },
  methods: {
    ...mapActions('Grade', ['getExam']),
    ...mapMutations(['getExamListAll']),
    showModal () {
      this.visible = true
    },
    handleOk (e) {
      if (!this.$data.change) {
        this.addMsg()
      } else {
        const data = {
          grade_name: this.$data.className,
          room_id: this.$data.SelectChange,
          subject_id: this.$data.SelectChange2
        }
        changeClass(data).then(e => {
          if (e.data.code === 1) {
            this.$data.className = ''
            this.$data.SelectChange = ''
            this.$data.SelectChange2 = ''
            this.getExam()
            this.visible = false
          }
        })
      }
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    },
    handleSelectChange (value) {
      this.$data.SelectChange = value
    },
    handleSelectChange2 (value) {
      this.$data.SelectChange2 = value
    },
    inputChange (e) {
      this.$data.className = e.target.value
    },
    addMsg () {
      addClass({
        grade_name: this.$data.className,
        room_id: this.$data.SelectChange,
        subject_id: this.$data.SelectChange2
      }).then(e => {
        if (e.data.code === 1) {
          this.$data.className = ''
          this.$data.SelectChange = ''
          this.$data.SelectChange2 = ''
          this.getExam()
          this.visible = false
        }
      })
    },
    changeMsg (a) {
      this.visible = true
      this.$data.change = true
      this.$data.SelectChange = a.room_text
      this.$data.SelectChange2 = a.subject_text
      this.$data.className = a.grade_name
    },
    delMsg (e) {
      const data = {
        data: {
          grade_id: e.grade_id
        }
      }
      delClass(data).then(e => {
        this.getExam()
      })
    }
  },
  created () {
    this.getExam()
    getClassRoom().then(e => {
      this.$data.allRoom = e.data.data
    })
    getAllclass().then(e => {
      this.$data.allClass = e.data.data
    })
  },
  computed: {
    ...mapState('Grade', ['examlist'])
  }
}
</script>

<style>
.grade {
  width: 100vw;
  height: 100vh;
  background: #f0f2f5;
  padding: 0px 24px 24px;
  display: flex;
  flex-direction: column;
}
.grade h2 {
  padding: 20px 0px;
  margin-top: 10px;
}

.grade-content {
  background: #fff;
  flex: 1;
  border-radius: 10px;
}
</style>
